<!--
@description    绩效进度-概览
@author         秦俊强
@email          458112865@qq.com
@create         2020-02-25 20:06
-->

<template>
  <div class="progress-box">

    <!-- 加载中 -->
    <div class="loading-box" v-if="loading">
      <a-icon class="icon-loading" type="loading" />
    </div>


    <!-- 步骤初始化 start -->
    <div v-for="(item, ind) in progressData"
         :class="'step-box-' + item.pseq"
         :style="'width: ' + item.width">

      <!-- 并行的进度 start -->
      <div class="state-box" style="height: 100%" v-if="item.arr">
        <div class="container-box" v-for="cItem in item.arr"
             :style="'height: ' + 100/item.arr.length + '%'">
          <div class="state-box abs-center" :class="cItem.status">
            <!-- 标题 -->
            <div class="title">{{ cItem.title }}</div>

            <!-- 步骤 -->
            <div class="pseq">
              <div class="container-box">
                <!-- 步骤提示 -->
                <a-tooltip>
                  <template slot="title">
                    <p v-for="tips in cItem.ptips">{{ tips.key }}：{{ tips.value }}</p>
                  </template>

                  <div class="round abs-center" @click="goUrl(cItem.todoUrl)">{{ item.pseq }}</div>
                </a-tooltip>
              </div>
            </div>

            <!-- 状态文字 -->
            <div class="size">{{ state[cItem.status] || "等待中" }}</div>
          </div>

          <!-- 折线 上 -->
          <div class="line-poly-start abs-center" v-if="cItem.showLinePolyStart"
               :class="getLineColor(item.pseq, cItem.status)"></div>

          <!-- 折线 下 -->
          <div class="line-poly-end abs-center" v-if="cItem.showLinePolyEnd"
               :class="getLineColor(item.pseq, cItem.status)"></div>
        </div>
      </div>
      <!-- 并行的进度 end -->


      <!-- 串行的步骤 start -->
      <div class="state-box abs-center" :class="item.status" v-else>
        <!-- 当前步骤文字 -->
        <div class="title">{{ item.title }}</div>

        <div class="pseq">
          <div class="container-box">
            <!-- 步骤提示 -->
            <a-tooltip>
              <template slot="title">
                <p v-for="tips in item.ptips">{{ tips.key }}：{{ tips.value }}</p>
              </template>

              <div class="round abs-center" @click="goUrl(item.todoUrl)">{{ item.pseq }}</div>
            </a-tooltip>

            <!-- 右边的线条 -->
            <div v-if="item.pseq !== 7" class="line abs-center"
                 :class="getLineColor(item.pseq, item.status)"></div>

            <!-- 左边的线条 -->
            <div v-if="ind > 0 && progressData[ind - 1].arr"
                 class="line-left abs-center"
                 :class="getLineColor(item.pseq, item.status, 'left')"></div>
          </div>
        </div>

        <!-- 状态文字 -->
        <div class="size">{{ state[item.status] || "等待中" }}</div>
      </div>
      <!-- 串行的步骤 end -->
    </div>
    <!-- 步骤初始化 end -->

  </div>
</template>




<script>

  /* 引入进度配置文件 */
  import { processData } from './configs/kpi.progress.config.js';

  /* 封装通用 api 服务 */
  import { apiService } from '@/api/api.service.js';

  /**
   * api 接口
   *
   * getKaProgressView => 获取进度-概览
   * */
  import { getKaProgressView } from '@/api/api.js';




  export default {
    name: "KpiProgressOn",

    props: {
      // 父组件需要将考核期传过来
      yearMonth: {}
    },

    data() {
      return {
        loading: true,

        /* 状态 */
        state: {
          ongoing: '进行中',
          finished: '已完成',
          waiting: '等待中'
        },

        /* 进度数据 */
        progressData: processData()
      }
    },

    methods: {

      /* 打开对应模块的标签页 */
      goUrl(url) {
        if (!url) {
          this.$message.warning('该步骤未关联模块，或权限不足，请联系管理员。');
          return;
        }

        this.$router.push(url);
      },

      /* 后台数据赋值 */
      initState(pnodes) {
        this.progressData.forEach((item) => {
        debugger;
          if (item.arr) {
            item.arr[0]['status'] = pnodes[0].status;
            item.arr[1]['status'] = pnodes[1].status;

            item.arr[0]['ptips'] = pnodes[0].ptips;
            item.arr[1]['ptips'] = pnodes[1].ptips;

            item.arr[0]['todoUrl'] = pnodes[0].todoUrl;
            item.arr[1]['todoUrl'] = pnodes[1].todoUrl;
          } else {
            item['status'] = pnodes[item.pseq].status;
            item['ptips'] = pnodes[item.pseq].ptips;
            item['todoUrl'] = pnodes[item.pseq].todoUrl;
          }
        });
      },

      /* 获取进度-概览 */
      getKaProgressView() {
        let param = { indexYearMonth: this.yearMonth.value }
        this.progressData = processData();
        this.loading = true;
        apiService(getKaProgressView(param)).then((res) => {
          this.loading = false;
          this.initState(res.result.pnodes);
        }).catch((error) => {
          this.loading = false;
          this.$message.error(error.message);
        });
      },

      /* 返回线条颜色样式 */
      getLineColor(step, status, type) {
        let progressData = this.progressData;

        /* 如果是第一步 */
        if (step === 1) {
          if (status === 'finished') { return 'line-finished'; }
          if (status === 'ongoing') { return 'line-ongoing'; }
        }

        /* 等待中 */
        if (status === 'waiting') { return ''; }

        if (type && type === 'left') {
          /* 进行中 */
          if (status === 'ongoing') { return 'line-ongoing'; }

          let arr = progressData[0].arr;
          if (arr[0].status === 'finished' && arr[1].status === 'finished') { return 'line-finished'; }
        }

        /* 已完成 */
        if (status === 'finished') {
          if (progressData[step].status === 'finished') { return 'line-finished'; }
          if (progressData[step].status === 'ongoing') { return 'line-ongoing'; }
        }

        return '';
      }

    }
  }
</script>




<style lang="less" scoped>

  /* 默认文字、描边颜色 */
  @autoColor: #cccccc;

  /* 进行中颜色 */
  @ongoingColor: #FF6600;

  /* 已完成颜色 */
  @finishedColor: #14BA89;



  .container-box {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .abs-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }

  .progress-box {
    width: 100%;
    height: 300px;
    background-color: #fafafa;
    border-radius: 3px;
    position: relative;

    /* 默认 */
    [class*="step-box-"] {
      text-align: center;
      height: 100%;
      float: left;
      position: relative;

      .state-box {
        width: 100%;

        .title {
          font-size: 16px;
          height: 40px;
          line-height: 40px;
        }

        .pseq {
          height: 30px;
          margin: 5px 0;
        }

        .size {
          height: 20px;
          line-height: 20px;
          color: @autoColor;
        }

        /* 圆 */
        .round {
          width: 30px;
          height: 30px;
          line-height: 28px;
          border: 1px dashed @autoColor;
          border-radius: 15px;
          background-color: #ffffff;
          color: @autoColor;
          z-index: 100;

          &:hover {
            cursor: pointer;
          }
        }

        /* 线 */
        .line, .line-left,
        [class*="line-poly-"] {
          z-index: 1;
          border-color: @autoColor;
          border-style: dashed;
        }
        .line {
          width: 100%;
          margin-left: 50%;
          border-width: 0 0 1px 0;
        }
        .line-left {
          width: 50%;
          margin-left: -25%;
          border-width: 0 0 1px 0;
        }
        [class*="line-poly-"] {
          width: 50%;
          margin-left: 25%;
        }
        .line-poly-start {
          height: 75px;
          border-width: 1px 1px 0 0;
          margin-top: 48px;
        }
        .line-poly-end {
          height: 75px;
          border-width: 0 1px 1px 0;
          margin-top: -28px;
        }

        .line-finished { border-style: solid; }
        .line-finished { border-color: @finishedColor; }
        .line-ongoing { border-color: @ongoingColor; }
      }



      /* 已完成 */
      .finished {
        .size { color: @finishedColor; }
        .round { border: 1px solid @finishedColor; background-color: @finishedColor; color: #ffffff; }
      }

      /* 进行中 */
      .ongoing {
        .size { color: @ongoingColor; }
        .round { border: 1px solid @ongoingColor; background-color: @ongoingColor; color: #ffffff; }
      }

    }


    .loading-box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      background: rgba(255, 255, 255, 0.5);
      text-align: center;

      .icon-loading {
        margin: 70px auto 0 auto;
        font-size: 30px;
        color: @primary-color;
      }
    }
  }
</style>
